<template>
  <div class="contact_box">
    <div class="contact-container">
      <div class="close" @click="isContacUs_fn(false)"></div>
      <img src="../../assets/contactUs.png" width="200" class="contactUs-content-image_3uf1P">
      <div class="contactUs_main">
        <svg
          t="1721905267285"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="7742"
          width="20"
          height="20"
        >
          <path
            d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z"
            fill="#3B5998"
            p-id="7743"
          ></path>
        </svg>

        <a :href="fb_url" target="_blank">
          <p>{{ $t('to_Facebook_customer_service') }}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
let fb_url = ref('')
if(localStorage.getItem('lang') == 'en'){
  fb_url = 'https://www.facebook.com/profile.php?id=61564549723234'
}else{
  fb_url = 'https://www.facebook.com/YYTwo2/'
}

defineProps(["isContacUs_fn"]); //header组件传递过来的显示隐藏函数
</script>

<style lang="less" scoped>
.contact_box {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 98;
  position: fixed;
  top: 0;
  .contact-container {
    background: white;
    padding: 35px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);
    // width: 100%;
    max-width: 600px;
    margin-top: 20px;
    display: flex;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    h2 {
      margin-bottom: 10px;
    }

    .contactUs_main {
      display: flex;
      height: 35px;
      line-height: 35px;
      background-color: #d3f2ff;
      font-weight: bold;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 6px;
      padding: 5px 15px;
      a {
        margin: 0;
        color: #000;
      }
      .icon {
        margin: 0;
      }
      p {
        // width: 40%;
        text-align: center;
        margin: 0;
        margin-left: 5px;
      }
    }
    .contactUs_main:hover {
      background-color: #b2e2f6;
      p {
        text-decoration: underline;
      }
    }
  }
}
</style>
